<template>
  <header class="app-header">
    <div class="header-content">
      <div class="logo-container" @click="goHome">
        <div class="logo-circle">
          <img :src="logoImage" alt="Logo" class="logo-image">
        </div>
        <div class="logo-text-container">
          <h1 class="logo-text">慢牛电控</h1>
          <div class="slogan">速牛电控非官方最专业平台</div>
        </div>
      </div>

      <div class="header-right">
        <button class="menu-toggle" @click="toggleMenu" :class="{ active: menuOpen }">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
    </div>

    <div class="mobile-menu" :class="{ active: menuOpen }">
      <div class="menu-items">
        <router-link to="/" class="menu-link" @click="closeMenu">
          <span class="menu-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path fill-rule="evenodd"
                d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
              <path fill-rule="evenodd"
                d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
            </svg>
          </span>
          首页
        </router-link>
        <router-link to="/tire-calculator" class="menu-link" @click="closeMenu">
          <span class="menu-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
              <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
            </svg>
          </span>
          轮胎周长计算
        </router-link>

        <router-link to="/abs-calculator" class="menu-link" @click="closeMenu">
          <span class="menu-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
              <defs>
                <linearGradient id="absIconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="#ff5a5a" />
                  <stop offset="100%" stop-color="#ff0000" />
                </linearGradient>
              </defs>
              <circle cx="8" cy="8" r="7" fill="none" stroke="url(#absIconGradient)" stroke-width="1" />
              <circle cx="8" cy="8" r="4" fill="none" stroke="url(#absIconGradient)" stroke-width="1" />
              <path d="M8 1v1M8 14v1M1 8h1M14 8h1" stroke="url(#absIconGradient)" stroke-width="0.75" />
              <!-- 齿圈表示 -->
              <path d="M8 4v1M10 8h1M8 11v1M5 8H4" stroke="url(#absIconGradient)" stroke-width="1.5" />
              <path d="M9.5 5.5l0.7 0.7M10.5 9.5l0.7 0.7M5.5 10.5l0.7 0.7M4.5 6.5l0.7 0.7"
                stroke="url(#absIconGradient)" stroke-width="0.75" />
            </svg>
          </span>
          ABS齿圈计算器
        </router-link>

        <router-link
          to="/iframes?url=https://c.cfmoto.com/ebook/h5/#/index?languageSign=zh&specificationId=222&sign=df3c34c66ff9000c136fb7a9f074a7ea"
          class="menu-link" @click="closeMenu">
          <span class="menu-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
              <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
            </svg>
          </span>
          某核车型说明书
        </router-link>
        <!-- <router-link to="/controller-categories" class="menu-link" @click="closeMenu">
          <span class="menu-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 11 4.5h1.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H11v1h1.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H11v1h1.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H11A2.5 2.5 0 0 1 8.5 14v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 1 11.5H.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5H1v-1H.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5H1A2.5 2.5 0 0 1 3.5 2V.5A.5.5 0 0 1 4 0h1z" />
            </svg>
          </span>
          控制器分类
        </router-link>
        <router-link to="/sign-in" class="menu-link" @click="closeMenu">
          <span class="menu-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
              <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm0 14.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13z" />
            </svg>
          </span>
          积分签到
        </router-link> -->
        <router-link to="/faq-contact" class="menu-link" @click="closeMenu">
          <span class="menu-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
              <path
                d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
            </svg>
          </span>
          常见问题与联系
        </router-link>
        
        <router-link to="/vehicle-info" class="menu-link" @click="closeMenu">
          <span class="menu-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M12.5 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM11 6.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z"/>
              <path d="M12.096 6.223A4.92 4.92 0 0 0 13 5.698V7c0 .289-.213.654-.753 1.007a4.493 4.493 0 0 1 1.753.25V4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13v-1.302c-.505.31-1.225.487-2 .487-1.816 0-3.5-1.094-3.5-2.685 0-1.427 1.388-2.445 3-2.445.653 0 1.235.195 1.7.444-.43.132-.877.216-1.336.216a3.5 3.5 0 0 1-.511-.039c.323.488.973.88 1.743.88zM3 4c0-.267.39-.764 1.233-1.223C5.085 2.307 6.455 2 8 2s2.915.307 3.767.777C12.61 3.236 13 3.733 13 4v3.535c-.47-.183-1-.268-1.5-.268-2.16 0-4 1.446-4 3.268 0 1.37 1.082 2.538 2.5 3.025V10a.5.5 0 0 1 .5-.5c.68 0 1.41-.114 2-.3V13c0 .267-.39.764-1.233 1.223C10.915 14.693 9.545 15 8 15s-2.915-.307-3.767-.777C3.39 13.764 3 13.267 3 13V4z"/>
            </svg>
          </span>
          车辆信息
        </router-link>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import logoImage from '@/assets/logo.png';

const router = useRouter();
const menuOpen = ref(false);

function toggleMenu() {
  menuOpen.value = !menuOpen.value;

  // 如果菜单打开，禁止背景滚动
  if (menuOpen.value) {
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = '';
  }
}

function closeMenu() {
  menuOpen.value = false;
  document.body.style.overflow = '';
}

function goHome() {
  router.push('/');
  closeMenu();
}
</script>

<style lang="scss" scoped>
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 100;
  border-bottom: 1px solid rgba(255, 58, 58, 0.3);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  height: 60px;
  display: flex;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.logo-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.logo-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.8);
  padding: 2px;
  border: 2px solid var(--primary-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.logo-text-container {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}

.logo-text {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.slogan {
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 2px;
  font-weight: 700;
  color: transparent;

  /* 渐变背景：和之前一样 */
  background-image: linear-gradient(
    90deg,
    #ff0000 0%,
    #ffff00 25%,
    #00ff00 50%,
    #00ffff 75%,
    #ff4756c5 100%
  );

  background-size: 200% 100%; /* 简化为 2 倍宽度更容易控制 */

  background-position: -50% 50%;

  -webkit-background-clip: text;
  background-clip: text;

  animation: flow-loop 3s infinite linear;
}

@keyframes flow-loop {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: -100% 50%;
  }
}

.menu-toggle {
  width: 30px;
  height: 24px;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0;
  z-index: 110;

  span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(255, 58, 58, 0.3);
  }

  &.active {
    span:first-child {
      transform: translateY(11px) rotate(45deg);
    }

    span:nth-child(2) {
      opacity: 0;
      transform: translateX(10px);
    }

    span:last-child {
      transform: translateY(-11px) rotate(-45deg);
    }
  }

  &:hover span {
    box-shadow: 0 0 8px rgba(255, 58, 58, 0.7);
  }
}

.mobile-menu {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 90;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, box-shadow 0.4s ease;
  backdrop-filter: blur(10px);

  &.active {
    max-height: 100vh;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);

    &::after {
      opacity: 1;
    }
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0),
        rgba(255, 58, 58, 0.5),
        rgba(255, 58, 58, 0));
    opacity: 0;
    transition: opacity 0.4s ease;
  }
}

.menu-items {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.menu-link {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  padding: 15px;
  margin-bottom: 5px;
  border-radius: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: rgba(20, 20, 20, 0.5);

  .menu-icon {
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: all 0.3s;
    width: 24px;
    height: 24px;
  }

  &:hover,
  &.router-link-active {
    color: var(--primary-color);
    background-color: rgba(30, 30, 30, 0.8);
    transform: translateX(5px);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.15);
    border-left: 3px solid var(--primary-color);

    .menu-icon {
      transform: scale(1.1);
    }
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 58, 58, 0.1), transparent);
    transition: 0.5s;
  }

  &:hover::after {
    left: 100%;
  }
}
</style>